<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MBT HTML Editor</title>
<style type="text/css">
a{ color:#0080ff; text-decoration:none;}
a:hover, a:visited {color:#0066FF; text-decoration:none}
.mbt {
	color: #0080ff; font-size: 12px; font-weight: bold; font-family: Tahoma, Geneva, sans-serif; 
}
.mbt1 {
	font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-size: 10px; color: #289728;
}
.h {
	color: #0080ff;
}
.B_MBT {
	font-size: 35px;
	font-weight: bold;
	font-family: Verdana, Geneva, sans-serif;
	color: #555;
}
</style>

</head>

<body>
<script>    
////////////////////////////////////////////////////////////////////
// Setting

var rate = 20;  // Increase amount(The degree of the transmutation)


////////////////////////////////////////////////////////////////////
// Main routine

if (document.getElementById)
window.onerror=new Function("return true")

var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID


if (document.all) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    document.onmouseover = Mozilla_doRainbowAnchor;
    document.onmouseout = Mozilla_stopRainbowAnchor;
}


//=============================================================================
// doRainbow
//  This function begins to change a color.
//=============================================================================
function doRainbow(obj)
{
    if (act == 0) {
        act = 1;
        if (obj)
            objActive = obj;
        else
            objActive = event.srcElement;
        clrOrg = objActive.style.color;
        TimerID = setInterval("ChangeColor()",100);
    }
}


//=============================================================================
// stopRainbow
//  This function stops to change a color.
//=============================================================================
function stopRainbow()
{
    if (act) {
        objActive.style.color = clrOrg;
        clearInterval(TimerID);
        act = 0;
    }
}


//=============================================================================
// doRainbowAnchor
//  This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function doRainbowAnchor()
{
    if (act == 0) {
        var obj = event.srcElement;
        while (obj.tagName != 'A' && obj.tagName != 'BODY') {
            obj = obj.parentElement;
            if (obj.tagName == 'A' || obj.tagName == 'BODY')
                break;
        }

        if (obj.tagName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}


//=============================================================================
// stopRainbowAnchor
//  This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function stopRainbowAnchor()
{
    if (act) {
        if (objActive.tagName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}


//=============================================================================
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
//  This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_doRainbowAnchor(e)
{
    if (act == 0) {
        obj = e.target;
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
            obj = obj.parentNode;
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                break;
        }

        if (obj.nodeName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = obj.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}


//=============================================================================
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
//  This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_stopRainbowAnchor(e)
{
    if (act) {
        if (objActive.nodeName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}


//=============================================================================
// Change Color
//  This function changes a color actually.
//=============================================================================
function ChangeColor()
{
    objActive.style.color = makeColor();
}


//=============================================================================
// makeColor
//  This function makes rainbow colors.
//=============================================================================
function makeColor()
{
    // Don't you think Color Gamut to look like Rainbow?

    // HSVtoRGB
    if (elmS == 0) {
        elmR = elmV;    elmG = elmV;    elmB = elmV;
    }
    else {
        t1 = elmV;
        t2 = (255 - elmS) * elmV / 255;
        t3 = elmH % 60;
        t3 = (t1 - t2) * t3 / 60;

        if (elmH < 60) {
            elmR = t1;  elmB = t2;  elmG = t2 + t3;
        }
        else if (elmH < 120) {
            elmG = t1;  elmB = t2;  elmR = t1 - t3;
        }
        else if (elmH < 180) {
            elmG = t1;  elmR = t2;  elmB = t2 + t3;
        }
        else if (elmH < 240) {
            elmB = t1;  elmR = t2;  elmG = t1 - t3;
        }
        else if (elmH < 300) {
            elmB = t1;  elmG = t2;  elmR = t2 + t3;
        }
        else if (elmH < 360) {
            elmR = t1;  elmG = t2;  elmB = t1 - t3;
        }
        else {
            elmR = 0;   elmG = 0;   elmB = 0;
        }
    }

    elmR = Math.floor(elmR).toString(16);
    elmG = Math.floor(elmG).toString(16);
    elmB = Math.floor(elmB).toString(16);
    if (elmR.length == 1)    elmR = "0" + elmR;
    if (elmG.length == 1)    elmG = "0" + elmG;
    if (elmB.length == 1)    elmB = "0" + elmB;

    elmH = elmH + rate;
    if (elmH >= 360)
        elmH = 0;

    return '#' + elmR + elmG + elmB;
}

// color

var mouse="out";
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var click="no";
var ghex="empty";
var timer;
	
function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
		return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
	curtop += obj.y;
	return curtop;
}		
	
function showtab(e,n)
{
	sc=n;
	var buta = document.getElementById('cv');
	var posx = findPosX(buta);
	var posy = findPosY(buta);
	var tabid = document.getElementById('tb');
 	tabid.style.display = "block";
	tabid.style.position = "absolute";
	tabid.style.left = posx+5;
	tabid.style.top = posy+25;

	if(timer)
	    clearTimeout(timer);
}

function showval(gg,rr,bb)
{
	mouse="in";
	click="no";
	var hexid = document.getElementById('hx');
	var hval=""+deciToHex(gg)+deciToHex(rr)+deciToHex(bb);
	hexid.value=hval;
	var dispid = document.getElementById('cv');
	dispid.style.backgroundColor="#"+hval;
			
}

function clicked(gg,rr,bb)
{
			
	mouse="in";
	click="yes";
	var hexid = document.getElementById('hx');
	var hval=""+deciToHex(gg)+deciToHex(rr)+deciToHex(bb);
	hexid.value=hval;
	var dispid = document.getElementById('cv');
	dispid.style.backgroundColor="#"+hval;
	var tabid = document.getElementById('tb');
	tabid.style.display = "none";
	ghex=hexid.value;
			
}
		
function deltab()
{
	timer = setTimeout('blotab()',500);
}
		
function deltaba()
{
	mouse = "out";
	timer = setTimeout('blotab()',500);
}
		
function blotab()
{
	if(mouse=="out" && click=="no")
	{
			
		var tabid = document.getElementById('tb');
		tabid.style.display = "none";
		var hexid = document.getElementById('hx');
		hexid.value="CEFFFF";
		var dispid = document.getElementById('cv');
		dispid.style.backgroundColor="#CEFFFF";

	}
			
	if(mouse=="out" && click=="yes")
	{
		var tabid = document.getElementById('tb');
		tabid.style.display = "none";
		var hexid = document.getElementById('hx').value;
		var gg = hexid.substr(0,2);
		var rr = hexid.substr(2,2);
		var bb = hexid.substr(4,2);
		var hval=""+deciToHex(gg)+deciToHex(rr)+deciToHex(bb);
		var dispid = document.getElementById('cv');
		dispid.style.backgroundColor="#"+hval;
	}
						
	if(mouse=="out" && click=="no" && ghex != "empty")
	{
		var tabid = document.getElementById('tb');
		tabid.style.display = "none";
		var hexid = document.getElementById('hx');
		hexid.value=ghex;
		var dispid = document.getElementById('cv');
		dispid.style.backgroundColor="#"+ghex;
			
	}
}
	
function getHexNum(num)
{
	ar1 = new Array('0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');
	ar2 = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
	if(num > 15)
		return num;
	else
	{
		red = ar2[num];
		return red;
	}
}

function deciToHex(arg)
{
	var res2 = 999;
	args = arg;
	while(args>15)
	{
		arg1=parseInt(args/16);
		arg2=args%16;
		arg2=getHexNum(arg2);
		args=arg1;

		if(res2 == 999)
		res2=arg2.toString();
		else
		res2=arg2.toString()+res2.toString();
	}

	if(args < 16 && res2 != 999)
	{
		def = getHexNum(args);
		res2=def+res2.toString();
	}
	else if(res2 == 999)
	{
		if(args < 16)
			res2= getHexNum(args);
		else
			res2= 1;
	}

	if(res2.length == 1)
		res2 = "0"+res2;
		return res2;
}
</script>
<table width="100%" border="0" style="background:#fff" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col"><a style="" href="http://beben-koben.blogspot.com" onclick="window.self.location='http://www.mybloggertricks.com'" target="otherframe"><span class="B_MBT">MBT Beben HTML EDITOR</span></a></th>
	</tr>
  <tr>
    <td><p>&nbsp;</p>
<center>	
   <table style="width:960px;border:solid 1px #cccccc; padding: 2px; background:#289728">

<tr><td valign="top">
<form name="form1" method="post">
  <textarea name="code" class="mbt" style="border:solid 1px #cccccc;padding:5px;width:430px;height:400px;scroll:auto;" onclick="focus(this.code)">&lt;style&gt;
#b3b3n {
font-size: 50px;
color: red;
font-weight: bold
}

&lt;!-- Add CSS Code Here -->

&lt;/style&gt;

&lt;div id=&quot;b3b3n&quot;&gt; Editor HTML Yooo !!!&lt;/div&gt;

&lt;!-- Add HTML Code Here -->


&lt;script&gt;

&lt;!-- Variable Script Here -->

&lt;/script&gt;

JUST PRESS PREVIEW BUTTON PLISSS
</textarea>
</form>
</td><td valign="top">
<iframe src="about:blank" name="preview" style="height:400px;width:500px;border:solid 1px #cccccc;padding:5px; background:#ffffff" frameborder="0">
</iframe>
</td>
</tr>
</table>
	<br />
<button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
 Preview</button>
<button onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">
Clear </button>
</center>
</td>
  </tr>
<td>
<br />
<div align="center">
<form name=colorform>
Hexa Value : #<input name=hexval id=hx value=B3B3N size=7></input> Color Viewer : <input type=button size=20 value="              " name=disp id=cv readonly onmouseover="showtab(event)"
onmouseout="deltab()" style="background-color:#99f;"></input><div id=tb style="position: absolute;top: 400px; left: 700px; ; display: none;" onmouseout="deltaba()">
<table cellpadding=2 cellspacing=0 style="border: 1px black;">

<script type="text/javascript"> 
for(i=0;i<256;i+=85)
{
document.write("<tr style=\"border: 1px black;\">");
		for(j=0;j<256;j=j+51)
		{
			for(k=0;k<256;k=k+25.5)
			{
				var ii = Math.round(i);
				var jj = Math.round(j);
				var kk = Math.round(k);
						
				if(ii == 255 && jj == 255 && kk == 255)
				{
					document.write("<td onmouseover='showval("+ii+","+jj+","+kk+")' \
					onclick='clicked("+ii+","+jj+","+kk+")' style='border: 0px solid black; width:8px; height: 8px; background-color: rgb("+ii+","+jj+","+kk+");'> \
					<a href=http://beben-koben.blogspot.com style='text-decoration: none; \
					font-family: arial, verdana, san-serif; color: blue; font-size: 10px;'>B</a></td>");
				}else{
 				document.write("<td onmouseover='showval("+ii+","+jj+","+kk+")' \
				onclick='clicked("+ii+","+jj+","+kk+")' style=\"border: 0px solid black; width:8px; height: 8px; \
				font-size: 5px; background-color: rgb("+ii+","+jj+","+kk+");\""+"> </td>");
				}
			}
			document.write("</tr><tr>");
		}
		document.write("</tr>");
}
</script>
</table>
</div>  
</td>
  <tr>
    <td><center><br /><br />
    <span class="mbt1">© 2009, All Rights Reserved. HTML Editor by </span><a href="http://www.mybloggertricks.com/2009/10/learn-css-html-and-javascript-offline.html" target="_blank" title="My Blogger Tricks">mybloggertricks</a> & <a href="http://beben-koben.blogspot.com/" target="_blank" title="Tutorial Blog for Stylish Blogger">Beben Koben</a></center></td>
  </tr>
</table>
</body>
</html>
